<template>
    <ContentField>
        <table class="table table-striped table-hover" style="text-align:center;">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>玩家</th>
                    <th>rating</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user of users" :key="user.id">
                    <td>{{ user.rank }}</td>
                    <td>
                        <img :src="user.photo" class="user_photo">
                        &nbsp;
                        <span>{{ user.username }}</span>
                    </td>
                    <td>
                        {{ user.rating }}
                    </td>
                </tr>
            </tbody>
        </table>

        <nav aria-label="...">
            <ul class="pagination" style="float:right;">
                <li class="page-item" @click="get_current_page(1)">
                    <a class="page-link" href="#">首页</a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page of pages" :key="page.number"
                    @click="get_current_page(page.number)">
                    <a class="page-link" href="#">{{ page.number }}</a>
                </li>
                <li class="page-item" @click="get_current_page(-1)">
                    <a class="page-link" href="#">尾页</a>
                </li>
            </ul>
        </nav>
    </ContentField>
</template>

<script>
import ContentField from '../../components/ContentField.vue';
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';

export default {
    components: {
        ContentField
    },
    setup() {

        const store = useStore();
        let users = ref([]);
        let current_page = 1;
        let users_count = 0;
        let max_page = 1;
        let pages = ref([]);

        const get_current_page = (page) => {
            if (page === -1) {
                current_page = max_page;
                pull_records(max_page);
            } else {
                current_page = page;
                pull_records(page);
            }
        }

        const get_pages = () => {
            let new_pages = [];
            for (let i = current_page - 2; i <= current_page + 2; i++) {
                if (i >= 1 && i <= max_page) {
                    new_pages.push({
                        number: i,
                        is_active: i === current_page ? "active" : "",
                    })
                }
            }
            pages.value = new_pages;
        }
        const pull_records = (page) => {
            $.ajax({
                url: "http://123.60.185.149:8100/rank/getlist",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                data: {
                    page: page,
                },
                success(resp) {
                    users.value = resp.rankedusers;
                    users_count = resp.userscount;
                    max_page = parseInt(Math.ceil(users_count / 10));
                    get_pages();
                },
                error(resp) {
                    console.log(resp);
                }
            })
        }
        pull_records(current_page);

        return {
            get_current_page,
            users,
            pages,
            max_page
        }
    }
}
</script>

<style scoped>
.user_photo {
    width: 4vh;
    border-radius: 50%;
}
</style>